/*
 * @Description: 表单
 * @Author: Zzt
 * @Date: 2022-08-09 14:59:01
 * @LastEditTime: 2022-08-12 09:19:09
 */

import { useEffect, useMemo, useState } from 'react';
import EditPlan from './dialogs/EditPlan';
import type { IPageQuery } from '@/interfaces/global';
import { Button, Space, Table } from 'antd';
import { useAppraisalAndDispositionContext } from '../contexts/AppraisalAndDispositionContext';
import type { ColumnsType } from 'antd/es/table';
import { formatDate } from '@/utils';
import styles from '../styles/form.module.scss';
import classNames from 'classnames';

const cx = classNames.bind(styles);
const PlanList = () => {
  const { plan, setSelectKey, selectItems, deleteAppraisalPlan, getPlanList } =
    useAppraisalAndDispositionContext();

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 选中的表格项目
  const [selectTransfer, setSelectTransfer] = useState({});
  // 编辑弹窗
  const [FormVisible, setFormVisible] = useState(false);
  /* 关闭编辑弹窗 */
  const closeEditPlan = () => {
    setFormVisible(false);
    setSelectTransfer({});
  };
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  useEffect(() => {
    setLoading(true);
    if (listQuery) {
      setLoading(false);
      setTotal(0);
      getPlanList(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);
  /* 选择数据 */
  const handleEdit = (data: any) => {
    setSelectTransfer(data);
    setFormVisible(true);
  };
  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  const columns: ColumnsType = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      key: 'id'
    },
    {
      title: '计划编号ID',
      dataIndex: 'planNumId',
      align: 'center',
      key: 'planNumId'
    },
    {
      title: '计划标题',
      dataIndex: 'planTitle',
      align: 'center',
      key: 'planTitle'
    },
    {
      title: '计划创建时间',
      align: 'center',
      key: 'createTime',
      render: (_: any, record: any) => <>{formatDate(record.createTime, 'YYYY-MM-DD HH:mm:ss')}</>
    },
    {
      title: '计划时间',
      align: 'center',
      key: 'planTime',
      render: (_: any, record: any) => (
        <div className={cx('times')}>
          <div className={cx('time')}>{formatDate(record.planStartTime, 'YYYY-MM-DD')}</div>
          <div className={cx('time')}>-{''}</div>
          <div className={cx('time')}> {formatDate(record.planEndTime, 'YYYY-MM-DD')}</div>
        </div>
      )
    },
    {
      title: '实际执行时间',
      align: 'center',
      key: 'execStartTime',
      render: (_: any, record: any) => (
        <>
          {formatDate(record.execStartTime, 'YYYY-MM-DD')}-
          {formatDate(record.execEndTime, 'YYYY-MM-DD')}
        </>
      )
    },
    {
      title: '创建人',
      dataIndex: 'CreatMan',
      align: 'center',
      key: 'CreatMan'
    },
    {
      title: '计划状态',
      align: 'center',
      key: 'status',
      render: (_: any, record: any) => (
        <>{record.status === 0 ? '待执行' : record.status === 1 ? '正在执行' : '已执行'}</>
      )
    },
    {
      title: '操作',
      align: 'center',
      render: (_text: any, record: any) => (
        <Space>
          <Button
            type="link"
            size="small"
            onClick={() => {
              handleEdit(record);
            }}
          >
            查看/编辑
          </Button>
          <Button
            type="link"
            size="small"
            danger
            onClick={() => {
              deleteAppraisalPlan(record.id);
            }}
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  const onSelectChange = (selectedRowKeys: number[]) => {
    console.log(selectedRowKeys);
    setSelectKey(selectedRowKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  return (
    <>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={plan}
        loading={loading}
        bordered
        rowKey="id"
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      />
      {useMemo(
        () => (
          <EditPlan
            visible={FormVisible}
            data={selectTransfer}
            onClose={() => {
              closeEditPlan();
            }}
          />
        ),
        [FormVisible]
      )}
    </>
  );
};
export default PlanList;
